{include file='public:header-css'/}
<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    {include file='public:left-menu'/}
    <!--End 左侧导航-->
    
    <!--头部信息-->
    {include file='public:nav-header' title="数据管理" subTitle="会员统计"/}
    <!--End 头部信息-->
    
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      
      <div class="container-fluid">
        
        <div class="row">
          
          <div class="col-lg-12">
            <div class="card">
              <div class="card-header">
                <h4>3个月内用户</h4>
              </div>
              <div class="card-body">
                <div id="main" class="js-chartjs-bars"></div>
              </div>
            </div>
          </div>

        </div>
      </div>
      
    </main>
    <!--End 页面主要内容-->
  </div>
  <style>
    .link{
      color: #fff;
    }
    .link:hover{
      color: #fff;
    }
    .card{
      border-radius: 5px;
      overflow: hidden;
    }
    .js-chartjs-bars{
      width: 100%;
      height: 400px;
    }
  </style>
</div>
<!--图表插件-->
<script type="text/javascript" src="__STATIC__/js/echarts.min.js"></script>
<script type="text/javascript">
  var res = {$result|raw};
$(document).ready(function(e) {
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);

  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: 'rgba(0,122,255,0.5)'
        }
      }
    },
    xAxis: {
      type: 'category',
      data: res.time || [],
      axisPointer: {
        type: 'shadow',
        shadowStyle:{
          color:"rgba(0,122,255,0.1)"
        }
      },
      axisLine:{
        show:true,
        lineStyle:{
          color:"rgba(0,122,255,0.8)"
        }
      }
    },
    textStyle:{
      color:"#8b95a5"
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true,
    },
    color:"rgba(0,122,255,0.8)",
    yAxis: {
      type: 'value',
      splitLine:{
        show:true,
        lineStyle:{
          color:"rgba(0,122,255,0.1)"
        }
      },
      axisLine:{
        show:true,
        lineStyle:{
          color:"rgba(0,122,255,0.8)"
        }
      },
    },
    series: [{
      name: '注册用户',
      data: res.data || [],
      barWidth:30,
      type: 'line'
    }]
  };
  option && myChart.setOption(option);
});
</script>
</body>
</html>